<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>grid</title>
        <style>
            body {
                width: 50%;
                margin: 0 auto;
            }

            p {
                background-color: rgb(207, 232, 220);
                border: 2px solid rgb(79, 185, 227);
                padding: 10px;
                margin: 10px;
                border-radius: 5px;
            }

            /* 相对定位 ---- 使用top、left、right、bottom来相对文档流微调位置*/
            .relative {
                position: relative;
                top: -30px;
                left: 30px;
            }

            /* 绝对定位 ---- 使用top、left、right、bottom来相对容器进行定位 */
            .absolute {
                background-color: #888;
                position: absolute;
                top:  30px;
                /* left: 30px; */
            }
        </style>
    </head>

    <body>
        <h1>Positioning</h1>
        <!-- 相对定位 -->
        <p>I am a basic block level element.</p>
        <p class="relative">I am a basic block level element.</p>
        <p>I am a basic block level element.</p>
        <hr>
        <!-- 绝对定位 -->
        <p>I am a basic block level element.</p>
        <div style="position: absolute; top: 10px; left: 10px">
            <P>I am inner block</P>
            <p class="absolute">I am a basic block level element.</p>
        </div>
        <p>I am a basic block level element.</p>

        <form>
            <p>First of all, tell us your name and age.</p>
            <div>
              <label for="fname">First name:</label>
              <input type="text" id="fname">
            </div>
            <div>
              <label for="lname">Last name:</label>
              <input type="text" id="lname">
            </div>
            <div>
              <label for="age">Age:</label>
              <input type="text" id="age">
            </div>
          </form>
    </body>
</html>

